<script lang="ts">
import { defineComponent, ref, watch, reactive } from "vue";
import { UserModule } from "@/store/modules/user";
import {
    getUserInfo,
    getParameter,
    getTransferList,
    transfer,
    isUserExist,
} from "@/api/nodeapi";
import { showToast, showDialog, showConfirmDialog } from "vant";
import { useI18n } from "vue-i18n";
import { formatAddress } from "@/utils/format";
import Clipboard from "clipboard";

export default defineComponent({
    setup() {
        const { t } = useI18n();
        const referrer = ref();
        const active = ref(0);
        const active2 = ref(0);
        const pageLoading = ref(true);
        const loading2 = ref(false);
        const address = ref();
        const amount = ref();
        const userInfo = ref({});

        const setat = reactive({
            pageNum: 1,
            pageSize: 10,
            total: 0,
        });
        const refreshing = ref(false);
        const loading = ref(true);
        const finished = ref(false);
        const list: any = ref([]);
        const onRefresh = () => {
            // setat.pageNum = 0;
            // finished.value = false;
            // loading.value = true;
            // refreshing.value = true;
            onLoad();
        };
        const onLoad = async () => {
            const res = await getTransferList({
                pageNum: setat.pageNum - 1,
                pageSize: setat.pageSize,
            });
            list.value = res.data.data.TransferList || [];
            setat.total = res.data.data.Total;
            loading.value = false;
            // list.value = [
            //     {
            //         Id: 1,
            //         Reward: 100,
            //         CreatedAt: "2025-06-26",
            //         FromAddress: "TFM66dwYagys4Bbn5Qhk58KPp49Jf7bw2i",
            //         ToAddress: "TFM66dwYagys4Bbn5Qhk58KPp49Jf7bw2i",
            //         TokenType: 1,
            //         Amount: 100,
            //     },
            //     {
            //         Id: 2,
            //         Reward: 100,
            //         CreatedAt: "2025-06-26",
            //         FromAddress: "THNHoTzHQBVXFGvJoSERsaNQcZ5w16Le88",
            //         ToAddress: "TFM66dwYagys4Bbn5Qhk58KPp49Jf7bw2i",
            //         TokenType: 1,
            //         Amount: 100,
            //     },
            //     {
            //         Id: 3,
            //         Reward: 100,
            //         CreatedAt: "2025-06-26",
            //         FromAddress: "TFM66dwYagys4Bbn5Qhk58KPp49Jf7bw2i",
            //         ToAddress: "TFM66dwYagys4Bbn5Qhk58KPp49Jf7bw2i",
            //         TokenType: 1,
            //         Amount: 100,
            //     },
            // ];
        };

        const onSubmit = async () => {
            if (!address.value) return;
            if (!amount.value) return;
            loading2.value = true;
            await referrer.value.loadVerifyToken(true);
            loading2.value = false;
            showConfirmDialog({
                title: "转出",
                beforeClose: async function (action: string): Promise<boolean> {
                    if (action === "confirm") {
                        try {
                            const resisUserExist = await isUserExist({
                                address: address.value,
                            });
                            if (resisUserExist.data.code != 20) {
                                showToast({
                                    message: "该地址未注册",
                                    icon: "clear",
                                    className: "_showToast2",
                                    position: "top",
                                });
                                return false;
                            }
                            const res = await transfer({
                                tokenType: active.value,
                                amount: amount.value,
                                address: address.value,
                            });
                            if (res.data.code == 20) {
                                showDialog({ title: `${t("layout.success")}` });
                                address.value = "";
                                amount.value = "";
                            } else {
                                showToast({
                                    message: res.data.message,
                                    icon: "clear",
                                    className: "_showToast2",
                                    position: "top",
                                });
                            }
                            loadData();
                            onRefresh();
                        } catch (params: any) {}
                        return false;
                    } else {
                        return true;
                    }
                },
            }).catch(() => {});
        };
        const copy = async (id: string) => {
            const clipboard = new Clipboard(id);
            clipboard.on("success", () => {
                showToast({
                    message: t("layout.copySuccessfully"),
                    icon: "checked",
                    className: "_showToast",
                });
                clipboard.destroy();
            });
            clipboard.on("error", () => {
                showToast(t("layout.fail"));
                clipboard.destroy();
            });
        };
        const loadData = async () => {
            try {
                getUserInfo().then((res) => {
                    userInfo.value = res.data.data.UserInfo || {};
                });
                pageLoading.value = false;
            } catch (error) {}
        };
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                    onRefresh();
                }
            },
            { immediate: true }
        );
        return {
            referrer,
            active,
            active2,
            address,
            amount,
            userInfo,
            pageLoading,
            copy,

            list,
            setat,
            refreshing,
            finished,
            onRefresh,
            onLoad,
            loading,
            onSubmit,
            formatAddress,
            UserModule,
            loading2,
        };
    },
});
</script>

<template>
    <div class="main2">
        <div class="page">
            <van-form @submit="onSubmit">
                <van-tabs v-model:active="active" class="tabsNav">
                    <van-tab title="USDT" :name="0"> </van-tab>
                    <van-tab title="VTBK" :name="1"> </van-tab>
                </van-tabs>
                <div class="balance" v-if="active == 0">
                    <div class="label">
                        <img
                            src="@/assets/image/USDT.svg"
                            alt=""
                            srcset=""
                        />USDT
                    </div>
                    <div class="value">
                        <span>{{ $t("layout.Balance") }}</span
                        >{{ userInfo.USDT || 0 }}
                    </div>
                </div>
                <div class="balance" v-else>
                    <div class="label">
                        <img src="@/assets/logo3.png" alt="" srcset="" />VTBK
                    </div>
                    <div class="value">
                        <span>{{ $t("layout.Balance") }}</span
                        >{{ userInfo.VTBK || 0 }}
                    </div>
                </div>
                <div class="inputBlock">
                    <div class="name">{{ $t("layout.Address") }}</div>
                    <van-field
                        v-model="address"
                        class="address"
                        :placeholder="$t('layout.PleaseEnterTheAddress')"
                    />
                    <div class="name">{{ $t("layout.Amount") }}</div>
                    <div class="input-box">
                        <van-field
                            v-model="amount"
                            :placeholder="$t('layout.Pleaseenterquantity')"
                        />
                        <div
                            class="max"
                            @click="amount = userInfo.USDT"
                            v-if="active == 0"
                        >
                            MAX
                        </div>
                        <div class="max" @click="amount = userInfo.VTBK" v-else>
                            MAX
                        </div>
                    </div>
                </div>
                <van-button
                    round
                    block
                    type="primary"
                    :disabled="pageLoading"
                    native-type="submit"
                    :loading="loading2"
                >
                    {{ $t("layout.confirm") }}
                </van-button>
            </van-form>
            <div class="listTitle">{{ $t("layout.TransferRecords") }}</div>
            <div class="list">
                <div class="head">
                    <span>{{ $t("layout.Type") }}</span>
                    <span>{{ $t("layout.TransferOutTime") }}</span>
                    <span>{{ $t("layout.Address") }}</span>
                    <span>{{ $t("layout.Amount") }}</span>
                </div>
                <ul>
                    <template v-for="(item, index) in list" :key="index">
                        <li
                            v-if="
                                item.FromAddress.toUpperCase() ==
                                UserModule.userAddr.toUpperCase()
                            "
                        >
                            <div>{{ $t("layout.Transferout") }}</div>
                            <div>{{ item.CreatedAt }}</div>
                            <div
                                class="address"
                                :class="'address' + index"
                                @click="copy(`.address${index}`)"
                                :data-clipboard-text="item.ToAddress"
                            >
                                {{ formatAddress(item.ToAddress) }}
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="20"
                                    height="20"
                                    viewBox="0 0 20 20"
                                    fill="none"
                                >
                                    <path
                                        d="M13.2041 3.01074C14.2128 3.113 15 3.96435 15 5L15.2041 5.01074C16.2128 5.113 17 5.96435 17 7V16L16.9893 16.2041C16.8938 17.1457 16.1457 17.8938 15.2041 17.9893L15 18H8L7.7959 17.9893C6.85435 17.8938 6.1062 17.1457 6.01074 16.2041L6 16L5.7959 15.9893C4.85435 15.8938 4.1062 15.1457 4.01074 14.2041L4 14V5C4 3.96435 4.78722 3.113 5.7959 3.01074L6 3H13L13.2041 3.01074ZM6 4C5.44772 4 5 4.44772 5 5V14C5 14.5523 5.44772 15 6 15H13C13.5523 15 14 14.5523 14 14V5C14 4.44772 13.5523 4 13 4H6ZM12 13H7V12H12V13ZM12 10H7V9H12V10ZM12 7H7V6H12V7ZM7 16C7 16.5523 7.44772 17 8 17H15C15.5523 17 16 16.5523 16 16V7C16 6.44772 15.5523 6 15 6V14L14.9893 14.2041C14.8938 15.1457 14.1457 15.8938 13.2041 15.9893L13 16H7Z"
                                        fill="#3B82F6"
                                    />
                                </svg>
                            </div>
                            <div class="value" v-if="item.TokenType == 3">
                                {{ $t("layout.Nodes") }}
                                <span>{{ item.Amount }}</span>
                            </div>
                            <div class="value" v-else>
                                <span>-{{ item.Amount }}</span>
                                {{ ["USDT", "VTBK", "TBK"][item.TokenType] }}
                            </div>
                        </li>
                        <li v-else>
                            <div>{{ $t("layout.TransferIn") }}</div>
                            <div>{{ item.CreatedAt }}</div>
                            <div
                                class="address"
                                :class="'address' + index"
                                @click="copy(`.address${index}`)"
                                :data-clipboard-text="item.FromAddress"
                            >
                                {{ formatAddress(item.FromAddress) }}
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="20"
                                    height="20"
                                    viewBox="0 0 20 20"
                                    fill="none"
                                >
                                    <path
                                        d="M13.2041 3.01074C14.2128 3.113 15 3.96435 15 5L15.2041 5.01074C16.2128 5.113 17 5.96435 17 7V16L16.9893 16.2041C16.8938 17.1457 16.1457 17.8938 15.2041 17.9893L15 18H8L7.7959 17.9893C6.85435 17.8938 6.1062 17.1457 6.01074 16.2041L6 16L5.7959 15.9893C4.85435 15.8938 4.1062 15.1457 4.01074 14.2041L4 14V5C4 3.96435 4.78722 3.113 5.7959 3.01074L6 3H13L13.2041 3.01074ZM6 4C5.44772 4 5 4.44772 5 5V14C5 14.5523 5.44772 15 6 15H13C13.5523 15 14 14.5523 14 14V5C14 4.44772 13.5523 4 13 4H6ZM12 13H7V12H12V13ZM12 10H7V9H12V10ZM12 7H7V6H12V7ZM7 16C7 16.5523 7.44772 17 8 17H15C15.5523 17 16 16.5523 16 16V7C16 6.44772 15.5523 6 15 6V14L14.9893 14.2041C14.8938 15.1457 14.1457 15.8938 13.2041 15.9893L13 16H7Z"
                                        fill="#3B82F6"
                                    />
                                </svg>
                            </div>
                            <div class="value" v-if="item.TokenType == 3">
                                {{ $t("layout.Nodes") }}
                                <span>{{ item.Amount }}</span>
                            </div>
                            <div class="value" v-else>
                                <span> +{{ item.Amount }}</span>
                                {{
                                    ["USDT", "VTBK", "TBK", "NFT"][
                                        item.TokenType
                                    ]
                                }}
                            </div>
                        </li>
                    </template>
                    <list-finished v-if="!loading && list.length == 0" />
                </ul>
                <div class="pagination">
                    <van-pagination
                        v-model="setat.pageNum"
                        :total-items="setat.total"
                        :show-page-size="3"
                        :items-per-page="setat.pageSize"
                        force-ellipses
                        @change="onRefresh"
                    >
                        <template #prev-text>
                            <van-icon name="arrow-left" />
                        </template>
                        <template #next-text>
                            <van-icon name="arrow" />
                        </template>
                    </van-pagination>
                </div>
            </div>
        </div>
    </div>
    <referrer-2
        ref="referrer"
        @load="loading2 = false"
        @cross="loading2 = false"
    />
</template>

<style lang="less" scoped>
.page {
    .van-form {
        padding: 24px;
        border-radius: 20px;
        border: 1px solid #d9d9d9;
        .tabsNav {
            &:deep(.van-tabs__wrap) {
                height: 60px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 8px;
                overflow: hidden;
                .van-tabs__nav {
                    background: transparent;
                    gap: 20px;
                }
                .van-tab {
                    color: #000;
                    font-size: 20px;
                    border-radius: 10px;
                    border: 1px solid #d9d9d9;
                    &.van-tab--active {
                        color: #eb0029;
                        border: 1px solid #eb0029;
                    }
                }
                .van-tabs__line {
                    display: none;
                }
            }
        }
        .balance {
            margin-top: 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .label {
                display: flex;
                align-items: center;
                font-size: 36px;
                font-weight: 400;
                img {
                    width: 50px;
                    margin-right: 8px;
                }
            }
            .value {
                color: #eb0029;
                font-size: 36px;
                font-weight: 900;
                text-align: right;
                span {
                    display: block;
                    color: #000;
                    font-size: 20px;
                    font-weight: 400;
                }
            }
        }
        .inputBlock {
            margin-top: 13px;
            .name {
                padding-top: 40px;
                margin-bottom: 20px;
                color: #000;
                font-size: 20px;
                font-weight: 700;
            }
            .van-field {
                padding: 0;
                border-radius: 10px;
                background: transparent;
                height: auto;
                border: none;
                &::after {
                    display: none;
                }
                &:deep(input) {
                    padding: 0 20px;
                    font-size: 16px;
                    height: 60px;
                    color: #000;
                    border-radius: 10px;
                    border: 1px solid #d9d9d9;
                    &::-webkit-input-placeholder {
                        color: #949494;
                    }
                    &:-moz-placeholder {
                        color: #949494;
                    }
                    &::-moz-placeholder {
                        color: #949494;
                    }
                    &:-ms-input-placeholder {
                        color: #949494;
                    }
                    &:focus {
                        border: 1px solid #eb0029;
                        background: #fff7f7;
                    }
                }
            }
            .input-box {
                display: flex;
                align-items: center;
                .max {
                    margin-left: 12px;
                    width: 80px;
                    height: 60px;
                    flex-shrink: 0;
                    line-height: 60px;
                    text-align: center;
                    font-weight: 500;
                    font-size: 20px;
                    color: #eb0029;
                    border-radius: 10px;
                    border: 1px solid #eb0029;
                    cursor: pointer;
                }
            }
        }
        .van-button {
            margin-top: 40px;
            border-radius: 10px;
        }
    }

    .listTitle {
        margin-top: 72px;
        color: #000;
        font-size: 20px;
        font-weight: 700;
    }
    .list {
        margin-top: 22px;
        border-radius: 20px;
        border: 1px solid #d9d9d9;
        overflow: hidden;
        background: #fff;
        .head {
            padding: 25px 0;
            display: flex;
            background: #f8f8f8;
            text-align: center;
            span {
                flex: 1;
                color: #000;
                font-size: 16px;
                font-weight: 700;
            }
        }
        ul {
            li {
                padding: 22px 0;
                display: flex;
                text-align: center;
                border-bottom: 1px solid #d9d9d9;
                div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex: 1;
                    color: #000;
                    font-size: 16px;
                    font-weight: 400;
                    .img {
                        margin-left: 8px;
                        width: 20px;
                        height: 20px;
                    }
                    &.address {
                        color: #3b82f6;
                    }
                    span {
                        margin-right: 7px;
                        font-weight: 700;
                    }
                }
            }
        }
        .pagination {
            padding-top: 50px;
            text-align: right;
            padding-right: 10px;
            .van-pagination {
                display: inline-block;
            }
        }
    }
    @media (max-width: 1000px) {
        & {
            .van-form {
                padding: 24px;
                border-radius: 20px;
                border: 1px solid #d9d9d9;
                .tabsNav {
                    &:deep(.van-tabs__wrap) {
                        height: 48px;
                        .van-tabs__nav {
                            gap: 10px;
                        }
                        .van-tab {
                            font-size: 16px;
                            .van-tab__text--ellipsis {
                                display: inline;
                            }
                        }
                    }
                }
                .balance {
                    justify-content: center;
                    .label {
                        font-size: 16px;
                        img {
                            width: 24px;
                        }
                    }
                    .value {
                        display: flex;
                        align-items: center;
                        font-size: 20px;
                        font-weight: 900;
                        text-align: left;
                        span {
                            margin-right: 12px;
                            font-size: 16px;
                        }
                    }
                }

                .inputBlock {
                    margin-top: 11px;
                    .name {
                        padding-top: 24px;
                        margin-bottom: 12px;
                        font-size: 16px;
                    }
                    .van-field.address {
                        &:deep(input) {
                            font-size: 14px;
                        }
                    }

                    .input-box {
                        display: flex;
                        align-items: center;
                        .max {
                            margin-left: 4px;
                            width: 60px;
                            height: 60px;
                            font-size: 16px;
                        }
                    }
                }
                .van-button {
                    margin-top: 32px;
                }
            }
            .listTitle {
                margin-top: 60px;
            }
            .list {
                .head {
                    padding: 20px 0;
                    span {
                        font-size: 14px;
                        font-weight: 700;
                    }
                }
                ul {
                    li {
                        padding: 15px 0;
                        div {
                            font-size: 12px;
                            svg {
                                width: 12px;
                                height: 12px;
                            }
                            span {
                                margin-right: 3px;
                            }
                        }
                    }
                }
                .pagination {
                }
            }
        }
    }
}
</style>
